<template>
  <div ref="dom" class="dom">
    <!-- <div v-if="!md" class="no-more">{{noMore}}</div> -->
    <el-skeleton :rows="6" animated v-if="!md" />
    <div v-else v-html="md" class="markdown-body"></div>
  </div>
</template>
<script>
import MarkdownIt from "markdown-it"
import hljs from 'highlight.js'
const Markdown = MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return '<pre><code class="hljs">' +
          hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
          '</code></pre>';
      } catch (__) {
        console.log()
      }
    }
    return '<pre><code class="hljs">' + Markdown.utils.escapeHtml(str) + '</code></pre>';
  }
});

import axios from 'axios'
export default {
  props: {
    menuData: {
      type: Array,
      default: () => []
    },
    menuList: {
      type: Array,
      default: () => []
    },
    getPath: {
      type: String,
      default: ''
    },
    setTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      md: null,
      noMore: '加载中...'
    }
  },
  mounted() {
    this.$store.commit('SET_MENU', this.menuData)
  },
  methods: {
    getMd(path) {
      path = path.replace('web/','')
      if (this.$refs.dom) {
        this.$refs.dom.style = 'opacity: .5'
      }
      try {
        axios(`${process.env.VUE_APP_BASE_API}/md${path}.md`).then(res => {
          if (res.data) {
            this.md = Markdown.render(res.data);
            setTimeout(() => {
              this.$refs.dom.style = ''
            }, 100)
          } else {
            this.noMore = '暂无数据！'
            this.$refs.dom.style = ''
          }
        }).catch(() => {
          this.md = ''
          setTimeout(() => {
            this.noMore = '网络有问题或服务出错！'
            this.$refs.dom.style = ''
          }, 500)
        })
      } catch (error) {
        console.log(error)
      }
    },
    getTitle(arr, path) {
      if (path === this.getPath) {
        document.title = this.setTitle;
        return false
      }
      for (let i = 0, len = arr?.length; i < len; i++) {
        if (arr[i].path === path) {
          document.title = `${arr[i].title} - ${this.setTitle}`;
        } else {
          if (arr[i].children?.length > 0) {
            this.getTitle(arr[i].children, path)
          }
        }
      }
    }
  },
  watch: {
    "$route.path": {
      handler(e) {
        this.getMd(e)
        this.getTitle(this.menuList, e)
      },
      immediate: true,
      deep: true
    }
  }
}

</script>
<style lang="scss" scoped>
::v-deep .el-loading-spinner{
  top: 100px;
}
.dom{
  transition: .3s;
  box-sizing: border-box;
  background: #fff;
  padding: 10px;
  .markdown-body{
    background: transparent;
    color: #333;
    // ::v-deep p,::v-deep ul{
    //   code{
    //     color: #da1039;
    //     background: #f5f5f5;
    //   }
    // }
    // ::v-deep blockquote{
    //   background: #f5f5f5;
    //   color: #333;
    // }
    // ::v-deep h2{
    //   border-bottom: 1px solid #c5c5c5;
    // }
    ::v-deep {
      p,ul{
        code{
          color: #da1039;
          background: #f5f5f5;
        }
      }
      blockquote{
        background: #f5f5f5;
        color: #333;
      }
      h1,h2{
        border-bottom: 1px solid #c5c5c5;
      }
    }
  }
}
</style>
